<template>
    <div>
        <el-drawer  title="更换托盘列表" size="75%"  :visible.sync="toolDrawer.drawer" :with-header="false">
            <el-button size="mini" type="primary" style="margin:2px 6px" @click="replaceToolCode">更换托盘</el-button>
            <el-button size="mini" type="primary" style="margin:2px 6px" @click="replaceToolByHandle">手动更换托盘</el-button>
            <el-table :data="toolDrawer.beSortTableData" style="width: 100%" row-key="id" height=600  highlight-current-row  @selection-change="currentToolTableData">
                <el-table-column type="selection" width="50" ></el-table-column>
                <el-table-column prop="toolCode" label="托盘号" width="150" ></el-table-column>
                <el-table-column prop="palletStatus" label="托盘状态" width="180" ></el-table-column>
                <el-table-column prop="isSortName" label="是否参与分拣" width="180" ></el-table-column>
                <el-table-column prop="taskStatus" label="任务状态" width="180" ></el-table-column>
                <el-table-column prop="packageCode" label="工作包" ></el-table-column>
                <el-table-column prop="aoCode" label="AO号"  ></el-table-column>
            </el-table>
        </el-drawer>
        <el-drawer  title="缓存箱列表" size="75%"  :visible.sync="drawer.drawer" :with-header="false">
            <el-table :data="drawer.beSortTableData" style="width: 100%" row-key="id" height=600  highlight-current-row  @current-change="currentTableData">
                <el-table-column  prop="workbinCode" label="缓存箱名字" width="150"> </el-table-column>
                <el-table-column prop="workbinStatus" label="状态" width="130"> </el-table-column>
                <el-table-column prop="taskType" label="需手动处理" width="130"> </el-table-column>
                <el-table-column prop="roadway" label="巷道" width="120"> </el-table-column>
                <el-table-column prop="taskCnt" label="当前巷道排队任务数" width="120"> </el-table-column>
                <el-table-column prop="waitMin" label="预计等待时长(分钟)" width="120"> </el-table-column>
                <el-table-column prop="itemCode" label="图号"></el-table-column>
                <el-table-column prop="itemQty" label="待入数量"></el-table-column>
                <el-table-column prop="aoCode" label="配套AO" show-overflow-tooltip></el-table-column>
                <el-table-column prop="mProductNumber" label="型号"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="150" ></el-table-column>
                <el-table-column prop="orderTime" label="下发时间" width="150" ></el-table-column>
                <el-table-column prop="parentTaskId" label="移库中" width="150" ></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button  size="mini" v-if="scope.row.taskType=='可以创建任务'" @click="handleEdit(scope.$index, scope.row)">创建任务</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>

        <div class="sm-spm-dataDisplay">
            <TableTitle>
                <slot>
                    <p>
                        缓存箱列表
                    </p>
                </slot>
            </TableTitle>
            <ul style="width:100%;height:80px;display:inline-block;overflow-y:scroll;white-space:nowrap;">
                <li v-for="(value, index) in workbinInfo" :key="index" ref="smgAllgzbli ">
                    <p style="color:black;font-size:18px;">
                        箱号：<span style="margin-left: 5px">{{ value.workbinCode }}</span>
                    </p>
                    <p style="color:black;font-size:18px;">
                        托盘：<span style="margin-left: 5px">{{ value.toolCode }}</span>
                    </p>
                </li>
            </ul>
        </div>
        <div>
            <TopSearch ref="topSearch">
                <el-form :inline="true" label-width="100" :model="formInline" class="demo-form-inline">
                    <el-form-item>
                        <!-- <el-button type="primary" size="mini" @click="stopTask">暂停任务</el-button> -->
                        <el-button type="primary" size="mini" @click="exeTask">执行任务</el-button>
                        <el-button type="primary" size="mini" @click="cleanWaitingTask">清理等待任务</el-button>
                        <el-button type="primary" size="mini" @click="showReplaceToolView">更换托盘</el-button>
                        <el-button type="primary" size="mini" @click="lookupHcx">查看缓存箱</el-button>
                        <el-button type="primary" size="mini" @click="lookupPackageRule">查看工作包规则</el-button>
                    </el-form-item>
                </el-form>
            </TopSearch>
            
            <div>
                <span>托盘号：{{ palletTm }}</span>
                <span style="margin-left: 150px;">箱子号：{{ workbinTm }}</span>
            </div>
        </div>
        
        <div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <TableTitle>
                            <slot>
                                <p>
                                    待分拣物料
                                </p>
                            </slot>
                            <el-form :inline="true" label-width="100" :model="formInline" class="demo-form-inline" style="margin-bottom: -25px;float: right;">
                                <el-form-item>
                                    <!-- <el-button type="primary" size="mini" @click="saveMaterialInfo">保存</el-button> -->
                                    <el-button type="primary" size="mini" ">占位（暂时不用）</el-button>
                                </el-form-item>
                            </el-form>
                        </TableTitle>
                        <!-- <el-table ref="multipleTable" height="550" :data="beSortTableData" tooltip-effect="dark"
                            style="width: 100%" highlight-current-row @cell-click="tabClick"
                            :row-class-name="tableRowClassName"> -->
                        <el-table ref="multipleTable" height="550" :data="beSortTableData" tooltip-effect="dark"
                        style="width: 100%" @selection-change="handleSelection">
                            <el-table-column type="selection" width="40"> </el-table-column>
                            <el-table-column type="index" label="序号" width="50"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="mesCheckQualiticationId" label="合格证号"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="barcode" label="条码" width="150"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="mProductNumber" label="成品型号" width="150" :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column prop="qualityCode" label="质量编号" width="150"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="itemCode" label="图号" width="150"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="aoCode" label="AO号" width="150"
                                :show-overflow-tooltip="true"></el-table-column>
                            <!-- <el-table-column prop="palletCode" label="对应托盘" width="150"
                                :show-overflow-tooltip="true"></el-table-column> -->
                            <el-table-column prop="itemQty" label="需求数量" width="100"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="matchQty" label="分拣数量" width="100" :show-overflow-tooltip="true">
                                <template slot="header">
                                    <span style="color: rgb(103, 194, 58)">待分拣数量</span>
                                </template>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.index === tabClickIndex &&
                                        tabClickLabel === '分拣数量'
                                        ">
                                        <el-input v-model="scope.row.matchQty" placeholder="分拣数量"
                                            @blur="inputBlur(scope.row)" oninput="value=value.replace(/[^0-9.]/g,'')"
                                            size="mini"></el-input>
                                    </span>
                                    <span v-else>{{ scope.row.matchQty }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="receiveRemark" label="备注" width="200" :show-overflow-tooltip="true">
                                <template slot="header">
                                    <span style="color: rgb(103, 194, 58)">备注</span>
                                </template>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.index === tabClickIndex &&
                                        tabClickLabel === '备注'
                                        ">
                                        <el-input v-model="scope.row.receiveRemark" placeholder="备注"
                                            @blur="saveRemark(scope.row)" 
                                            size="mini"></el-input>
                                    </span>
                                    <span v-else>{{ scope.row.receiveRemark }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isPaper" label="是否纸质合格证" width="120" :show-overflow-tooltip='true'>
                                <template slot="header">
                                    <span style="color: rgb(103, 194, 58)">是否纸质合格证</span>
                                </template>
                                <template slot-scope="scope">
                                    <span v-if="
                                    scope.row.index === tabClickIndex &&
                                    tabClickLabel === '是否纸质合格证'
                                    ">
                                        <el-select v-model="scope.row.isPaper" size="mini" placeholder="请选择" @blur="inputBlur(scope.row)">
                                            <el-option v-for="rst in isPaperSelect" :key="rst.code" :label="rst.name" :value="rst.code">
                                            </el-option>
                                        </el-select>
                                    </span>
                                    <span v-else>
                                        <el-select v-model="scope.row.isPaper" size="mini" placeholder="请选择" @blur="inputBlur(scope.row)">
                                            <el-option v-for="rst in isPaperSelect" :key="rst.code" :label="rst.name" :value="rst.code">
                                            </el-option>
                                        </el-select>
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div>
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="page.currentPage" :page-sizes="[50, 100, 200, 300, 400]"
                                :page-size="page.pageSize" layout="total, sizes, prev, pager, next" :total="page.total">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <TableTitle>
                            <slot>
                                <p>
                                    扫码确认的物料
                                </p>
                            </slot>
                            <el-form :inline="true" label-width="100" :model="formInline" class="demo-form-inline" style="margin-bottom: -25px;float: right;">
                                <el-form-item>
                                    <el-button type="primary" size="mini" @click="removeMaterialInfo">移除</el-button>
                                </el-form-item>
                            </el-form>
                        </TableTitle>
                        <el-table ref="multipleTable" height="550" :data="scanMaterialBoxs" tooltip-effect="dark"
                            style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="40"> </el-table-column>
                            <el-table-column type="index" label="序号" width="50"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="mesCheckQualiticationId" label="合格证号"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="barcode" label="条码" width="150"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="mProductNumber" label="成品型号" width="150" :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column prop="qualityCode" label="质量编号" width="150"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="itemCode" label="图号" width="150"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="aoCode" label="AO号" width="150"
                                :show-overflow-tooltip="true"></el-table-column>
                            <!-- <el-table-column prop="palletCode" label="对应托盘" width="150"
                                :show-overflow-tooltip="true"></el-table-column> -->
                            <el-table-column prop="itemQty" label="需求数量" width="100"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="matchQty" label="分拣数量" width="100"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="receiveRemark" label="备注" width="200" :show-overflow-tooltip="true">
                            </el-table-column>
                            <!-- <el-table-column prop="isPaper" label="是否纸质合格证" width="150"
                                :show-overflow-tooltip="true">
                            </el-table-column> -->
                        </el-table>
                        <div>
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="page.currentPage" :page-sizes="[50, 100, 200, 300, 400]"
                                :page-size="page.pageSize" layout="total, sizes, prev, pager, next" :total="page.total">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import request from "@/utils/request.js";
import TableTitle from "../../../../components/TableTitle.vue";
import TopSearch from "../../../../components/TopSearch.vue";
import { cacheList } from "@/utils/api.js";
export default {
    name: "SortTask",
    components: {
        TableTitle,
        TopSearch
    },
    data() {
        return {
            toolDrawer:{
                drawer:false,
                beSortTableData:[],
                currentData:[]
            },
            drawer:{
                drawer:false,
                beSortTableData:[],
                currentData:{}
            },
            scanMaterialBoxs:[],//扫码确认后的物料
            scanGzbOper:false,//重复扫码工作包回库
            scanHcxOper:false,//重复扫码缓存箱回库
            formInline: {
                palletCode: "",
                packageCode: "",
                aoCode: "",
                startPlaneNo: "",
                startTime: "",
                endTime: ""
            },
            workbinTm:"",
            palletTm:"",
            materialTm:"",
            scanValue:"",
            page: {
                total: 1,
                pageSize: 50,
                currentPage: 1
            },
            beSortTableData: [],
            selectData: [],
            tabClickIndex: '',
            tabClickLabel: '',
            isPaperSelect:[{ code: 'Y', name: '带证' }, { code: 'N', name: '不带证' }],
            workbinInfo: [
                {
                    workbinCode: '',
                    toolCode:''
                }
                
            ],
            beSortTableData: [
                {
                    msAssginWorkbintoolRelId:'',
                    mesCheckQualiticationId: '',
                    barcode: '',
                    mProductNumber: '',
                    qualityCode: '',
                    itemCode: '',
                    aoCode: '',
                    // palletCode: '',
                    itemQty: '',
                    matchQty: '',
                    receiveRemark: '',
                    isPaper: ''
                }
            ],
        }
    },
    methods: {
        replaceToolByHandle(){
            if(this.selectToolCode.length!=1){
                this.$Alert({ type: 'error', message: '请选择一条数据:'});
                return ;
            }
            this.$prompt('请输入托盘', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(({ value }) => {
                if(!value.startsWith("21208003")){
                    this.$Alert({ type: 'error', message: '输入的托盘信息不正确:'});
                    retrun ;
                }
                var param = this.selectToolCode[0];
                param.newToolCode = value;
                console.log("param",param);
                request.post("/PointPackageSortRest/replaceToolByHandle",param).then((res)=>{
                    if(res.data.retCode=="200"){
                    this.$Alert({title: "成功",message: res.data.message,type: "success"})
                    }else{
                        this.$Alert({title: "失败",message: res.data.message,type: "error"})
                    }
                    this.toolDrawer.drawer = false;
                    this.$options.methods.doQuery.bind(this)();
                });
            }).catch(() => {});
        },
        replaceToolCode(){//更换托盘
            console.log("xxxxx",this.toolDrawer.currentData);
            if(this.toolDrawer.currentData.length!=1){
                this.$Alert({title: "失败",message: "请勾选一条需要更换的托盘!",type: "error"})
                return;
            }
            var param = {sourceToolCode:this.selectToolCode[0].toolCode,
                targetToolCode:this.toolDrawer.currentData[0].toolCode,
                msAssginWorkbintoolRelId:this.selectToolCode[0].msAssginWorkbintoolRelId
            };
            request.post("/PointPackageSortRest/replaceToolCode",param).then((res)=>{
                console.log("res",res);
                if(res.data.retCode=="200"){
                    this.$Alert({title: "成功",message: res.data.message,type: "success"})
                }else{
                    this.$Alert({title: "失败",message: res.data.message,type: "error"})
                }
                this.toolDrawer.drawer = false;
                this.$options.methods.doQuery.bind(this)();
            })
        }, 
        currentToolTableData(val){
            this.toolDrawer.currentData = val;
        },
         currentTableData(val){
            this.drawer.currentData = val;
        },
        //修改备注
        saveRemark(){
          
            console.log('测试2',this.beSortTableData[0].receiveRemark)
            
          request.post("/PointPackageSortRest/saveRemark",{"receiveRemark":this.beSortTableData[0].receiveRemark,"msAssginWorkbintoolRelId":this.beSortTableData[0].msAssginWorkbintoolRelId}).then((res)=>{
                
                if(res.data.retCode==200){
                    this.$Alert({title: "成功",message: res.data.message,type: "success"});
                   
                }else{
                    this.$Alert({title: "失败",message: res.data.message,type: "error"});
                }
                this.hcxbox.dialog.dialogVisible = false;
                this.scanValue = this.workbinCode;
                this.$options.methods.scan.bind(this)();

            });
        },
        //缓存箱回库操作
        workbinBack(){
            if(this.workbinCode==""){
                this.$Alert({title: "失败", message: "请先扫缓存箱条码！",type: "error"});
                return ;
            }
            if(this.scanHcxOper){
                this.$Alert({title: "失败", message: "请不要重复扫缓存箱回库",type: "error"});
                return ;
            }
         /*   if(!this.scanSave){
                this.$Alert({title: "失败", message: "请先保存物料信息",type: "error"});
                return ;
            }*/
            //托盘扫码接口
            request.post("/inStoreroom/sortStoreRoomIn",{workbinCode:this.workbinCode}).then((res)=>{
               console.log("res",res);
               if(res.data.retCode=='200'){
                    //页面缓存箱编码
                    this.workbinCode = '';
                    this.scanHcxOper=true;
                    this.beSortTableData=[];
                    this.$Alert({
                    title: "成功",message: res.data.message,type: "success"
                    })
                }else{
                    this.$Alert({
                    title: "失败",message: res.data.message,type: "error",
                    })
                }
            });  
            
        },//托盘回库
        toolBack(){
            if(this.toolCode==""){
                this.$Alert({title: "失败", message: "请先扫工作包条码！",type: "error"});
                return ;
            }
            if(this.scanGzbOper){
                this.$Alert({title: "失败", message: "请不要重复扫托盘回库",type: "error"});
                return ;
            }
            if(!this.scanSave){
                this.$Alert({title: "失败", message: "请先保存物料信息",type: "error"});
                return ;
            }
            //托盘扫码接口
            request.post("/msTaskPackage/taskIn",{palletCode:this.toolCode}).then((res)=>{
               console.log("res",res);
               if(res.data.retCode=='200'){
                    //页面托盘编码
                    this.toolCode = '';
                    this.scanGzbOper=true;
                    this.scanMaterialBoxss=[];
                    this.$Alert({
                    title: "成功",message: res.data.message,type: "success"
                    })
                }else{
                    this.$Alert({
                    title: "失败",message: res.data.message,type: "error",
                    })
                }
            });  
            
        },
        //分拣保存接口
        savePackage(){
            this.scanSave=false;
            if(this.workbinCode!="" && this.toolCode!=""){
                console.log("保存的物料：",this.scanMaterialBoxs)
                if(this.scanMaterialBoxs.length<1){
                    this.$Alert({
                    title: "失败",message: "请先确认物料",type: "error",
                    })
                }else{
                    this.loading = true;
                    //分拣保存接口
                    request.post("/materialReceipt/putToolPackage",{toolCode:this.toolCode,materialDTOs:this.scanMaterialBoxs}).then((res)=>{
                    console.log("res",res);
                    if(res.data.retCode=='200'){
                            this.$Alert({
                            title: "成功",message: res.data.message,type: "success"
                            })
                            this.scanSave=true;
                            this.beSortTableData = [];
                            this.scanMaterialBoxs = [];
                            this.loading = false;
                        }else{
                            this.$Alert({
                            title: "失败",message: res.data.message,type: "error"
                            })
                        }
                    }); 
                    //定时任务清楚
                    var loadingTime = setInterval(() => {
                        clearInterval(loadingTime);
                        this.scanSave=true;
                        this.beSortTableData = [];
                        this.scanMaterialBoxs = [];
                        this.loading = false;
                    }, 5000);

                }
            } else{
                this.$Alert({
                title: "失败",message: "请先扫缓存箱以及托盘",type: "error",
                })
            }
        },
        handleSelectionChange(val) {
            this.selectData = val
        },
        handleSelection(val) {
            this.selectToolCode = val
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
        },
        handleCurrentChange(val) {
            this.page.currentPage = val;
            this.$options.methods.doQuery.bind(this)();
        },
        //查询
        doQuery() {
            var that = this;
            request.post("/packageUnpackRest/cacheList", {}).then((res) => {
                console.log(res);
                 this.workbinInfo = res.data;
            });
        },
        stopTask() {

        },
        exeTask() {
            request.post("/msTaskPackage/callSortBox").then((res)=>{
                console.log("执行任务res:",res);
                if(res.data.retCode=="200"){
                    this.$Alert({title: "成功", message: res.data.message,type: "success"});
                    return ;
                }else{
                    this.$Alert({title: "失败", message: res.data.message,type: "error"});
                    return ;
                }
            });
        },
        cleanWaitingTask() {
            request.post("/msTaskPackage/cleanWaitingTask",{}).then((res)=>{
                if(res.data.retCode=='200'){
                    this.$Alert({title: "成功",message: res.data.message,type: "success"})
                }else{
                    this.$Alert({ title: "失败",message: res.data.message,type: "error"})
                }
            })

        },
        showReplaceToolView() {
            console.log("this.selectToolCode",this.selectToolCode);
            if(this.selectToolCode==undefined){
                this.$Alert({title: "失败",message: "请勾选一条需要更换的托盘!",type: "error"})
                return;
            }
            this.toolDrawer.drawer = true;
            request.post("/PointPackageSortRest/queryReplaceTool",this.selectToolCode[0]).then((res)=>{
                this.toolDrawer.beSortTableData = res.data.list;
            })

        },
        lookupPackageRule() {

        },
        lookupHcx() {
             this.drawer.drawer = true;
            this.drawer.beSortTableData = [];
            var that = this;
            request.post("/PointPackageSortRest/searchSortingTask",{}).then((res)=>{
                console.log("res1",res);
                that.drawer.beSortTableData = res.data;
            })
        },
        saveMaterialInfo(){
            console.log(this.beSortTableData);
        },
        removeMaterialInfo(){
            for (let index = 0; index < this.selectData.length; index++) {
                for (let index2 = 0; index2 < this.scanMaterialBoxs.length; index2++) {
                    if (this.scanMaterialBoxs[index2] == this.selectData[index]) {
                        var obj = this.selectData[index];
                        this.scanMaterialBoxs.splice(index2,1)
                        this.beSortTableData.push(obj)
                    }
                }
            }
        },
        tabClick(row, column, cell, event) {
            switch (column.label) {
                case "序号": break;
                case "合格证号": break;
                case "条码": break;
                case "成品型号": break;
                case "质量编号": break;
                case "图号": break;
                case "AO号": break;
                case "对应托盘": break;
                case "需求数量": break;
                case "分拣数量":
                case "备注": this.tabClickIndex = row.index;
                    this.tabClickLabel = column.label; break;
                case "是否纸质合格证": break;
                default:
                    return;
            }
        },
        // 失去焦点初始化
        inputBlur(item) {
            this.tabClickIndex = null;
            this.tabClickLabel = "";
        },
        tableRowClassName({ row, rowIndex }) {
            // 把每一行的索引放进row
            row.index = rowIndex;
        },
        scanning(){
            if(this.scanValue.length == 12&&this.scanValue.indexOf("21208003")==0){//扫描托盘
                this.palletTm = this.scanValue;
                this.$options.methods.showToolMatchMaterialInfo.bind(this)();
            } else if(this.scanValue.length == 12&&(this.scanValue.indexOf("11208003")==0||this.scanValue.indexOf("31208003")==0)){//扫描缓存箱
                if (this.palletTm == '' || this.palletTm.length == 0) {
                    this.$Alert({
                        title: "失败",
                        message: '请扫描托盘',
                        type: "error",
                    })
                }else{
                    this.$options.methods.showHcxMatchMaterialInfo.bind(this)();
                    this.workbinTm = this.scanValue;
                }
                this.$refs.topSearch.openScan()
            } else if(this.scanValue == 9005){//确认
                 this.$options.methods.savePackage.bind(this)();
                this.scanValue="";
            } else if(this.scanValue == 9002){//箱子回库
                  this.scanHcxOper = false;
                this.$options.methods.workbinBack.bind(this)();
                this.scanValue="";
            } else if(this.scanValue == 9004){//托盘回库
                this.scanGzbOper = false;
                this.$options.methods.toolBack.bind(this)();
                this.scanValue=""
            } else if(this.scanValue.includes('"CPHGZ"')){//成品
                for (let index = 0; index < this.beSortTableData.length; index++) {
                    if (this.beSortTableData[index].barcode == this.scanValue) {
                        this.beSortTableData[index].outQty=this.beSortTableData[0].matchQty;
                        //将物料新增到扫码确认物料中
                        this.scanMaterialBoxs.push(this.beSortTableData[index]);
                        //将物料从待分拣物料中移除
                        this.beSortTableData.splice(index,1)
                        //清空输入框 聚焦输入框
                        this.$refs.topSearch.makeTmNull()
                        this.$refs.topSearch.openScan()
                        break;
                    }                    
                }
            } else if(this.scanValue.includes('"CKCODE"')){//标准件
                for (let index = 0; index < this.beSortTableData.length; index++) {
                    if (this.beSortTableData[index].barcode == this.scanValue) {
                        this.beSortTableData[index].outQty=this.beSortTableData[0].matchQty;
                        //将物料新增到扫码确认物料中
                        this.scanMaterialBoxs.push(this.beSortTableData[index]);
                        //将物料从待分拣物料中移除
                        this.beSortTableData.splice(index,1)
                        //清空输入框 聚焦输入框
                        this.$refs.topSearch.makeTmNull()
                        this.$refs.topSearch.openScan()
                        break;
                    }                    
                }
            } else {//零件
                for (let index = 0; index < this.beSortTableData.length; index++) {
                    if (this.beSortTableData[index].barcode == this.scanValue) {
                        this.beSortTableData[index].outQty=this.beSortTableData[0].matchQty;
                          console.log("22",this.beSortTableData[index])
                        //将物料新增到扫码确认物料中
                        this.scanMaterialBoxs.push(this.beSortTableData[index]);
                        //将物料从待分拣物料中移除
                        this.beSortTableData.splice(index,1)
                        //清空输入框 聚焦输入框
                        this.$refs.topSearch.makeTmNull()
                        this.$refs.topSearch.openScan()
                        break;
                    }                    
                }
            }
        },
        //缓存箱扫码
        showHcxMatchMaterialInfo(){
            if(this.scanValue.length!=12){
                this.$Alert({title: "失败",message:"条码格式有误",type: "error"})
            }
            this.beSortTableData = [];
            this.scanMaterialBoxs = [];
            //页面缓存箱编码
            this.workbinCode = this.scanValue;
            if(this.toolCode==""){
                this.$Alert({title:"错误",type:"error",message:"请先扫托盘!"});
                return ;
            }
            //缓存箱扫码接口
            request.post("/PointPackageSortRest/searchInventoryMaterialByWorkbinCode",{workbinCode:this.workbinCode,toolCode:this.toolCode}).then((res)=>{
            // that.beSortTableData = res.xxxxx
                console.log("res",res);
                if(res.data.retCode=='200'){
                    this.$Alert({
                    title: "成功",message: res.data.message,type: "success"
                    });
                    //页面进行赋值
                    this.beSortTableData = res.data.responseBody;
                }else{
                    this.$Alert({
                    title: "失败",message: res.data.message,type: "error",
                    });
                    this.workbinCode = "";
                };
            });  

            
        },
        showToolMatchMaterialInfo(){
            if(this.toolCode==""){
                if(this.scanValue.length!=12){
                    this.$Alert({
                    title: "失败",message:"条码格式有误",type: "error",
                    })
                }
                //页面托盘编码
                this.toolCode = this.scanValue;
            }else{//替换托盘时，清空物料
                this.toolCode = this.scanValue;
                this.scanMaterialBoxs = [];
                // for(var i=0;i<this.beSortTableData.length;i++){
                //     this.$refs.materialBox[i].style.color="black";
                //     this.$refs.materialBox[i].innerHTML="未确认";
                // }
                
            }
        },
    },
    mounted(){
        //查询该分拣台缓存箱列表
        cacheList({
          
        }).then((res) => {
            console.log('缓存箱列表',res)
            this.workbinInfo = res.data;
             console.log('缓存箱列表1',this.workbinInfo)
        })

        this.$bus.$on('saoma',(e)=>{
            this.scanValue = e
        })
        
    }
}
</script>
<style>
.input-width {
    width: 150px;
}

.workbinView ul {
    display: flex;
    overflow-y: hidden;
    height: 100%;
}

.workbinView ul li {
    flex: none;
    width: 190px;
    background-color: #ffffff;
    border: 1px solid #cccbcb;
    border-radius: 4%;
    margin-left: 1.8%;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 12px;
}

.workbinView ul li p {
    margin-top: 3px;
    margin-left: 5px;
    width: calc(100% - 4px);
}
.sm-spm-dataDisplay {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    /* overflow: hidden; */
}
.sm-spm-dataDisplay ul li {
    /* position: relative; */
    width:200px;
    height: 50px;
    padding: 5px;
    margin:10px 20px 10px 0 ;
    float: left;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: inset 0px 0px 20px 0px #cccbcb;
}
</style>